<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }
        /*列表样式*/

        .list_box {
            background-color: #fff;
            margin: 0.45rem 0;
            line-height: 1.5;
        }

        .list_box .list_all_info_box {
            padding: 0 0.95rem;
        }

        .list_box .list_all_info_box .user_info_box {
            display: flex;
            align-items: center;
            padding: 0.95rem 0;
        }

        .list_box .list_all_info_box .user_info_box .user_img {
            width: 2.45rem;
            margin-right: 0.95rem;
        }

        .dz_img_box {
            display: flex;
            align-items: center;
        }

        .dz_img_box .dz_img {
            width: 0.75rem;
            margin-right: 0.375rem;
        }

        .dz_img_box span {
            font-size: 0.7rem;
            color: #999;
        }

        .dz_img_box span.active {
            color: #ff0036;
        }

        .list_box .list_all_info_box .user_info_box .name_time_box {
            flex: 1;
        }

        .list_box .list_all_info_box .user_info_box .name_time_box .user_name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
        }

        .list_box .list_all_info_box .user_info_box .name_time_box .time {
            font-size: 0.6rem;
            color: #999;
        }

        .list_box .list_all_info_box .txt_box {
            font-size: 0.8rem;
            color: #333;
            text-align: justify;
            padding-bottom: 0.95rem;
        }
        /*他人评论*/

        .other_comment_list .comment_title_list {
            display: flex;
            justify-content: space-between;
            padding: 0 0.75rem;
            background-color: #fff;
        }

        .other_comment_list .comment_title_list .title_left,
        .other_comment_list .comment_title_list .title_right {
            padding: 0.75rem 0;
            min-height: 0.9rem;
            line-height: 0.9rem;
        }

        .other_comment_list .comment_title_list .title_left {
            font-size: 0.7rem;
            color: #333;
            font-weight: 600;
            text-align: center;
            position: relative;
        }

        .other_comment_list .comment_title_list .title_left::after {
            position: absolute;
            content: "";
            width: 0.1rem;
            height: calc(100% - 1.5rem);
            background-color: #f23030;
            left: -0.2rem;
            top: 50%;
            transform: translateY(-50%);
        }

        .other_comment_list .comment_title_list .title_right {
            display: flex;
            align-items: center;
        }

        .other_comment_list .comment_title_list .title_right img {
            width: 0.9rem;
            margin-right: 0.3rem;
        }

        .other_comment_list .comment_title_list .title_right span {
            font-size: 0.6rem;
            color: #666;
        }

        .comment_list {
            background-color: #fff;
            position: relative;
        }

        .comment_list:last-child {
            margin-bottom: 2.8rem;
        }

        .comment_list::after {
            position: absolute;
            content: "";
            width: calc(100% - 0.75rem);
            height: 1px;
            background-color: #e6e6e6;
            right: 0;
            bottom: 0;
        }

        .other_info_box {
            display: flex;
            align-items: center;
            padding: 0.75rem 0;
        }
        /*.other_info_box img {
            width: 1.95rem;
            margin: 0 0.75rem;
        }*/

        .other_info_box .other_name_time .name {
            font-size: 0.7rem;
            color: #333;
            line-height: 1.5;
        }

        .other_info_box .other_name_time .time {
            font-size: 0.6rem;
            color: #999;
            line-height: 1.5;
        }

        .comment_list .other_txt {
            padding: 0 0.75rem 0.75rem 0.75rem;
            text-align: justify;
            line-height: 1.5;
        }
        /*底部输入框*/

        .input_box {
            display: flex;
            position: fixed;
            align-items: center;
            bottom: 0;
        }

        .txt_input {
            background-color: #fff;
            padding: 0.75rem;
            max-height: 4rem;
            line-height: 1rem;
            overflow: auto;
            width: 85vw;
        }

        .input_box .txt_input span {
            font-size: 0.7rem;
            color: #999;
        }

        .input_box .finish_btn {
            width: 15vw;
            height: 100%;
            text-align: center;
            background: #fff;
            padding: 0.75rem 0;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="comment_detail">

            <ul class="all_list_box">
                <li class="list_box">
                    <div class="list_all_info_box">
                        <div class="user_info_box">
                            <!-- <img :src="bpl_hf_info.head_img" alt="" class="user_img"> -->
                            <div class="user_img" :style="'background:url('+bpl_hf_info.head_img+') center/cover no-repeat;width:2.45rem;height:2.45rem;'"></div>
                            <div class="name_time_box">
                                <div class="user_name">{{bpl_hf_info.username}}</div>
                                <div class="time">{{bpl_hf_info.addtime}}</div>
                            </div>
                            <div class="dz_img_box">
                                <img v-if="bpl_hf_info.is_like==1" src="../../image/four/dz_on.png" alt="" class="dz_img">
                                <img v-else src="../../image/four/dz_off.png" alt="" class="dz_img">
                                <span v-if="bpl_hf_info.likecount!=0">{{bpl_hf_info.likecount}}</span>
                                <span v-else></span>
                            </div>

                        </div>
                        <div class="txt_box">{{bpl_hf_info.content}}</div>
                    </div>
                </li>
            </ul>


            <ul class="other_comment_list">
                <li class="comment_title_list aui-border-b">
                    <div class="title_left">
                        评论 {{bpl_hf_info.item_num}}
                    </div>
                    <div class="title_right" @click="reordering()">
                        <img v-if="sort==1" src="../../image/four/sjzx.png" alt="">
                        <img v-else src="../../image/four/sjdx.png" alt="">
                        <span v-if="sort==1">时间正序</span>
                        <span v-else>时间倒序</span>
                    </div>
                </li>


                <li v-for="other_pl in more_pl" class="comment_list">
                    <div class="other_info_box">
                        <!-- <img :src="other_pl.head_img" alt=""> -->
                        <div :style="'background:url('+other_pl.head_img+') center/cover no-repeat;width:1.95rem;height:1.95rem;margin: 0 0.75rem;'"></div>
                        <div class="other_name_time">
                            <div class="name">{{other_pl.username}}</div>
                            <div class="time">{{other_pl.addtime}}</div>
                        </div>

                    </div>
                    <div class="other_txt">{{other_pl.content}}</div>
                </li>

            </ul>

        </div>

        <div class="input_box">
            <div class="txt_input" contenteditable="true">
                <span>我也要来说两句</span>
            </div>
            <div class="finish_btn" @click="finish()">完成</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {


        // 实例化vue
        var more_comment = new Vue({
            el: '.app',
            data: {
                bpl_hf_info: {},
                more_pl: [],
                sort: 1,
                statue: true,
                page: 1
            },
            mounted: function() {
                var $_this = this;

                $_this.get_bp_hf();
                $_this.get_more_pl($_this.sort);
                $_this.scroll_load();
            },

            methods: {
                // 获取被评论的评论
                get_bp_hf: function() {
                    var $_this = this
                        // 被评论评论详情
                    api.ajax({
                        url: window.Url.Community_replyDetails,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('user_data').token,
                                dynamic_item_id: api.pageParam.hf_pl_id,
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.re == 1) {
                                $_this.bpl_hf_info = ret.data.list;
                                // console.log("被评论的评论信息数据---" + JSON.stringify($_this.bpl_hf_info));
                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },
                // 获取评论该评论的所有评论数据
                get_more_pl: function() {
                    var $_this = this
                        // 更多回复详情
                    api.ajax({
                        url: window.Url.Community_moreReplyList,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('user_data').token,
                                dynamic_item_id: api.pageParam.hf_pl_id,
                                sort: $_this.sort,
                                page: $_this.page
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log("更多回复的详情---" + JSON.stringify(ret));
                            if (ret.re == 1) {
                                $_this.more_pl = ret.data.list;
                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });

                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },
                // 重新排序方法
                reordering: function() {
                    $_this = this;
                    $_this.page = 1;
                    $_this.status = !$_this.status;
                    if ($_this.status) {
                        $_this.sort = 1;
                    } else {
                        $_this.sort = 2;
                    }
                    $_this.get_more_pl();
                },
                // 提交评论
                finish: function() {
                    $('.finish_btn').click(function() {
                        if ($('.txt_input').html().indexOf('<span>') != -1) {
                            api.toast({
                                msg: '请填写评论内容',
                                duration: 2000,
                                location: 'bottom'
                            });

                        } else {
                            // 请求转发接口
                            api.ajax({
                                url: window.Url.Community_replyDynamic,
                                method: 'post',
                                data: {
                                    values: {
                                        token: $api.getStorage('user_data').token,
                                        content: "" + $('.txt_input').html(),
                                        dynamic_item_id: api.pageParam.hf_pl_id,
                                        type: 2
                                    }
                                }
                            }, function(ret, err) {
                                if (ret) {
                                    api.toast({
                                        msg: ret.info,
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                } else {
                                    alert(JSON.stringify(err));
                                }
                            });
                        }
                    })
                },
                scroll_load: function() {
                    var $_this = this;
                    var scroll = new auiScroll({
                        listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                        distance: 40 //判断到达底部的距离，isToBottom为true
                    }, function(ret) {
                        if (ret.isToBottom) {
                            $_this.page++
                                api.ajax({
                                    url: window.Url.Community_moreReplyList,
                                    method: 'post',
                                    data: {
                                        values: {
                                            token: $api.getStorage('user_data').token,
                                            dynamic_item_id: api.pageParam.hf_pl_id,
                                            sort: $_this.sort,
                                            page: $_this.page
                                        }
                                    }
                                }, function(ret, err) {
                                    if (ret) {
                                        // console.log("更多回复的详情---" + JSON.stringify(ret));
                                        if (ret.re == 1) {
                                            $_this.more_pl = $_this.more_pl.concat(ret.data.list);
                                        } else {
                                            api.toast({
                                                msg: ret.info,
                                                duration: 2000,
                                                location: 'bottom'
                                            });

                                        }
                                    } else {
                                        alert(JSON.stringify(err));
                                    }
                                });
                        }

                    });
                }
            }
        })

    };



    // 当输入框聚焦
    $('body').on('focus', '.txt_input', function() {
        if ($(".input_box span").length > 0) {
            $('.txt_input').html("");
        }
    })
    $('body').on('blur', '.txt_input', function() {
        if ($(".txt_input").html() == "") {
            $('.txt_input').html("<span>我也要来说两句~</span>");
        }
    });
</script>

</html>
